<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
  <title>菜单展示</title>
  <style>
    body {
      margin: 0;
      background-color: #000;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      overflow: hidden;
      flex-direction: column;
    }
    .slider {
      width: 90vw;
      height: 95vh;
      position: relative;
      overflow: hidden;
      border-radius: 12px;
      box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
    }
    .slider img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      position: absolute;
      opacity: 0;
      transition: opacity 0.8s ease-in-out;
      cursor: pointer;
      touch-action: none;
    }
    .slider img.active {
      opacity: 1;
    }
    /* 缩放关闭按钮 */
    .zoom-close-btn {
      position: fixed;
      top: 20px;
      right: 20px;
      width: 50px;
      height: 50px;
      background-color: rgba(0, 0, 0, 0.6);
      border-radius: 50%;
      display: none;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      z-index: 999;
      transition: all 0.3s ease;
      border: 2px solid rgba(255, 255, 255, 0.3);
    }
    .zoom-close-btn.show {
      display: flex;
    }
    .zoom-close-btn:active {
      background-color: rgba(255, 255, 255, 0.2);
      transform: scale(0.9);
    }
    .zoom-close-btn::before,
    .zoom-close-btn::after {
      content: '';
      position: absolute;
      width: 24px;
      height: 3px;
      background-color: #fff;
      border-radius: 2px;
    }
    .zoom-close-btn::before {
      transform: rotate(45deg);
    }
    .zoom-close-btn::after {
      transform: rotate(-45deg);
    }
    /* 模态框样式 */
    .modal {
      display: none;
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.95);
    }
    .modal.show {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .modal-content {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .modal-image {
      width: auto;
      height: auto;
      max-width: 95vw;
      max-height: 95vh;
      object-fit: contain;
      touch-action: none;
      will-change: transform;
      transform-origin: center center;
    }
    .modal-image.no-transition {
      transition: none;
    }
    .close-btn {
      position: absolute;
      top: 20px;
      right: 30px;
      color: #fff;
      font-size: 40px;
      font-weight: bold;
      cursor: pointer;
      z-index: 1001;
      background-color: rgba(0, 0, 0, 0.5);
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      line-height: 1;
    }
    .close-btn:hover {
      background-color: rgba(255, 255, 255, 0.2);
    }
    .zoom-hint {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      color: #fff;
      font-size: 14px;
      background-color: rgba(0, 0, 0, 0.7);
      padding: 10px 20px;
      border-radius: 20px;
      z-index: 1001;
    }
  </style>
</head>
<body>
  <div class="slider" id="slider"></div>
  
  <!-- 缩放关闭按钮 -->
  <div class="zoom-close-btn" id="zoomCloseBtn"></div>

  <!-- 图片查看模态框 -->
  <div class="modal" id="imageModal">
    <span class="close-btn" id="closeBtn">&times;</span>
    <div class="modal-content">
      <img class="modal-image" id="modalImage" src="" alt="">
    </div>
    <div class="zoom-hint">双指缩放查看</div>
  </div>

  <script>
    const username = "loveailong";   // 👈 修改为你的 GitHub 用户名
    const repo = "menu";             // 👈 修改为你的仓库名
    const folder = "images";         // 👈 图片所在文件夹名

    let index = 0;
    let images = [];
    let timer;

    async function loadImages() {
      const url = `https://api.github.com/repos/${username}/${repo}/contents/${folder}`;
      const response = await fetch(url);
      const files = await response.json();
      const slider = document.getElementById("slider");

      images = files
        .filter(file => file.name.match(/\.(jpg|jpeg|png|gif|webp)$/i))
        .map(file => file.download_url);

      if (images.length === 0) {
        slider.innerHTML = "<p style='color:white'>没有找到图片</p>";
        return;
      }

      images.forEach((imgUrl, i) => {
        const img = document.createElement("img");
        img.src = imgUrl;
        if (i === 0) img.classList.add("active");
        slider.appendChild(img);
      });

      startAutoPlay();
      setupImageViewer();
    }

    function showImage(newIndex) {
      const sliderImgs = document.querySelectorAll(".slider img");
      if (sliderImgs.length === 0) return;

      // 重置缩放
      if (window.resetSliderZoom) {
        window.resetSliderZoom();
      }

      sliderImgs[index].classList.remove("active");
      sliderImgs[index].style.transform = "";
      
      index = (newIndex + images.length) % images.length;
      sliderImgs[index].classList.add("active");
    }

    function startAutoPlay() {
      timer = setInterval(() => showImage(index + 1), 6000);
    }

    function resetTimer() {
      clearInterval(timer);
      startAutoPlay();
    }

    // 计算两点距离
    function getDistance(touch1, touch2) {
      const dx = touch1.clientX - touch2.clientX;
      const dy = touch1.clientY - touch2.clientY;
      return Math.sqrt(dx * dx + dy * dy);
    }

    function setupImageViewer() {
      const modal = document.getElementById("imageModal");
      const modalImg = document.getElementById("modalImage");
      const closeBtn = document.getElementById("closeBtn");
      const slider = document.getElementById("slider");
      const zoomCloseBtn = document.getElementById("zoomCloseBtn");

      // ===== 轮播区域变量 =====
      let sliderScale = 1;
      let sliderTranslateX = 0;
      let sliderTranslateY = 0;
      let sliderLastDistance = 0;
      let sliderIsPinching = false;
      let sliderIsDragging = false;
      let sliderHasDragged = false; // 记录本次触摸是否拖动过
      let sliderLastTap = 0; // 记录上次点击时间，用于双击检测
      let isClosingZoom = false; // 标记是否正在通过×按钮关闭缩放
      
      let touchStartX = 0;
      let touchStartY = 0;
      let touchStartTime = 0;

      // ===== 模态框变量 =====
      let modalScale = 1;
      let modalTranslateX = 0;
      let modalTranslateY = 0;
      let modalLastDistance = 0;
      let modalIsDragging = false;
      let modalLastTap = 0;

      // ========== 轮播区域事件 ==========
      slider.addEventListener("touchstart", (e) => {
        isClosingZoom = false; // 重置关闭标记
        
        if (e.touches.length === 2) {
          // 双指缩放 - 暂停轮播
          sliderIsPinching = true;
          sliderLastDistance = getDistance(e.touches[0], e.touches[1]);
          sliderHasDragged = false; // 重置拖动标记
          clearInterval(timer); // 暂停自动轮播
        } else if (e.touches.length === 1) {
          // 单指
          sliderIsPinching = false;
          sliderHasDragged = false; // 重置拖动标记
          touchStartX = e.touches[0].clientX;
          touchStartY = e.touches[0].clientY;
          touchStartTime = Date.now();
          
          if (sliderScale > 1.1) {
            sliderIsDragging = true;
            clearInterval(timer); // 缩放状态下拖动也暂停轮播
          }
        }
      });

      slider.addEventListener("touchmove", (e) => {
        if (e.touches.length === 2 && sliderIsPinching) {
          // 双指缩放
          e.preventDefault();
          const distance = getDistance(e.touches[0], e.touches[1]);
          const ratio = distance / sliderLastDistance;
          sliderScale = Math.min(Math.max(1, sliderScale * ratio), 5);
          sliderLastDistance = distance;
          updateSliderTransform();
          sliderHasDragged = true; // 标记进行了操作
        } else if (e.touches.length === 1 && sliderIsDragging) {
          // 拖动查看细节
          e.preventDefault();
          sliderTranslateX += e.touches[0].clientX - touchStartX;
          sliderTranslateY += e.touches[0].clientY - touchStartY;
          touchStartX = e.touches[0].clientX;
          touchStartY = e.touches[0].clientY;
          updateSliderTransform();
          sliderHasDragged = true; // 标记进行了拖动
        }
      });

      slider.addEventListener("touchend", (e) => {
        if (e.touches.length === 0) {
          // 如果正在通过×按钮关闭缩放，跳过所有处理
          if (isClosingZoom) {
            sliderIsDragging = false;
            sliderIsPinching = false;
            return;
          }
          
          const touchEndX = e.changedTouches[0].clientX;
          const touchEndY = e.changedTouches[0].clientY;
          const diffX = touchEndX - touchStartX;
          const diffY = touchEndY - touchStartY;
          const absDiffX = Math.abs(diffX);
          const absDiffY = Math.abs(diffY);
          const duration = Date.now() - touchStartTime;
          const currentTime = Date.now();
          const tapGap = currentTime - sliderLastTap;

          // 记录触摸开始时的缩放状态
          const wasZoomed = sliderScale > 1.1;
          
          // 处理缩放状态
          if (wasZoomed) {
            // 触摸开始时处于缩放状态
            
            // 判断是否为轻触（没有拖动、移动很小、时间很短）
            const isTap = !sliderHasDragged && !sliderIsPinching && absDiffX < 15 && absDiffY < 15 && duration < 400;
            
            if (isTap) {
              // 检测是否为双击
              if (tapGap < 350 && tapGap > 50) {
                // 双击：恢复原样并继续轮播
                sliderScale = 1;
                sliderTranslateX = 0;
                sliderTranslateY = 0;
                updateSliderTransform();
                startAutoPlay();
                sliderLastTap = 0; // 重置，避免三击
                // 不再执行后续逻辑
              } else {
                // 单击：记录时间，等待可能的双击
                sliderLastTap = currentTime;
                // 保持缩放状态
              }
            }
            // 快速水平滑动（非拖动）：恢复原样并切换图片
            else if (!sliderHasDragged && absDiffX > 80 && absDiffX > absDiffY && duration < 500) {
              // 只有快速滑动且没有拖动操作时才切换
              sliderScale = 1;
              sliderTranslateX = 0;
              sliderTranslateY = 0;
              updateSliderTransform();
              
              // 切换图片
              if (diffX > 0) {
                showImage(index - 1);
              } else {
                showImage(index + 1);
              }
              resetTimer();
              sliderLastTap = 0; // 重置双击计时
            }
            // 其他情况（双指缩放结束、拖动查看）：保持缩放，不启动轮播
            else {
              // 保持缩放状态，轮播保持暂停
              // 拖动后重置双击计时
              if (sliderHasDragged) {
                sliderLastTap = 0;
              }
            }
          } else {
            // 触摸开始时未缩放状态
            
            // 缩放小于1.1自动恢复
            if (sliderScale <= 1.1) {
              sliderScale = 1;
              sliderTranslateX = 0;
              sliderTranslateY = 0;
              updateSliderTransform();
            }

            // 未缩放状态下的滑动和点击
            if (sliderScale === 1 && !sliderIsPinching) {
              if (absDiffX > 50 && duration < 500) {
                // 滑动切换
                if (diffX > 0) {
      showImage(index - 1);
                } else {
                  showImage(index + 1);
                }
      resetTimer();
                sliderLastTap = 0; // 重置双击计时
              } else if (absDiffX < 20 && absDiffY < 20 && duration < 400) {
                // 检测双击或单击
                if (tapGap < 350 && tapGap > 50) {
                  // 双击：不做处理（避免误触发）
                  sliderLastTap = 0;
                } else if (tapGap > 350 || tapGap === 0) {
                  // 单击：打开模态框
                  const activeImg = slider.querySelector("img.active");
                  if (activeImg) {
                    openModal(activeImg.src);
                  }
                  sliderLastTap = currentTime;
                }
              }
            }
          }

          sliderIsDragging = false;
          sliderIsPinching = false;
          // 注意：不重置 sliderHasDragged，因为下次 touchstart 会重置
        }
      });

      // PC端点击
      slider.addEventListener("click", (e) => {
        // 只要点击的是图片且未缩放，就打开当前活动图片
        if (e.target.tagName === "IMG" && sliderScale === 1) {
          const activeImg = slider.querySelector("img.active");
          if (activeImg) {
            openModal(activeImg.src);
          }
        }
      });

      function updateSliderTransform() {
        const activeImg = slider.querySelector("img.active");
        if (activeImg) {
          activeImg.style.transform = `translate(${sliderTranslateX}px, ${sliderTranslateY}px) scale(${sliderScale})`;
        }
        
        // 根据缩放状态显示或隐藏关闭按钮
        if (sliderScale > 1.1) {
          zoomCloseBtn.classList.add("show");
        } else {
          zoomCloseBtn.classList.remove("show");
        }
      }

      window.resetSliderZoom = function() {
        sliderScale = 1;
        sliderTranslateX = 0;
        sliderTranslateY = 0;
        sliderIsPinching = false;
        sliderIsDragging = false;
        sliderHasDragged = false;
        sliderLastTap = 0;
        updateSliderTransform(); // 更新按钮显示状态
      };

      // 关闭按钮点击事件（PC端）
      zoomCloseBtn.addEventListener("click", () => {
        isClosingZoom = true; // 设置标记
        sliderScale = 1;
        sliderTranslateX = 0;
        sliderTranslateY = 0;
        updateSliderTransform();
        startAutoPlay(); // 恢复轮播
        sliderLastTap = 0;
        
        // 100ms后重置标记
        setTimeout(() => {
          isClosingZoom = false;
        }, 100);
      });

      // 防止关闭按钮的触摸事件冒泡到slider
      zoomCloseBtn.addEventListener("touchstart", (e) => {
        e.stopPropagation();
        e.preventDefault();
        isClosingZoom = true; // 设置标记
      });
      
      zoomCloseBtn.addEventListener("touchend", (e) => {
        e.stopPropagation();
        e.preventDefault();
        
        // 点击关闭按钮
        sliderScale = 1;
        sliderTranslateX = 0;
        sliderTranslateY = 0;
        updateSliderTransform();
        startAutoPlay(); // 恢复轮播
        sliderLastTap = 0;
        
        // 100ms后重置标记
        setTimeout(() => {
          isClosingZoom = false;
        }, 100);
      });

      // ========== 模态框功能 ==========
      function openModal(imgSrc) {
        modal.classList.add("show");
        modalScale = 1;
        modalTranslateX = 0;
        modalTranslateY = 0;
        
        // 先设置src
        modalImg.src = imgSrc;
        
        // 确保图片可见并重置transform
        modalImg.style.opacity = "1";
        modalImg.style.visibility = "visible";
        modalImg.classList.remove("no-transition");
        updateModalTransform();
        
        clearInterval(timer);
      }

      function closeModal() {
        modal.classList.remove("show");
        modalScale = 1;
        modalTranslateX = 0;
        modalTranslateY = 0;
        updateModalTransform();
        startAutoPlay();
      }

      closeBtn.addEventListener("click", closeModal);
      modal.addEventListener("click", (e) => {
        if (e.target === modal) {
          closeModal();
        }
      });

      // PC端双击
      modalImg.addEventListener("dblclick", (e) => {
        if (modalScale === 1) {
          modalScale = 2.5;
          const rect = modalImg.getBoundingClientRect();
          const x = e.clientX - rect.left;
          const y = e.clientY - rect.top;
          modalTranslateX = (rect.width / 2 - x) * 1.5;
          modalTranslateY = (rect.height / 2 - y) * 1.5;
        } else {
          modalScale = 1;
          modalTranslateX = 0;
          modalTranslateY = 0;
        }
        updateModalTransform();
      });

      // 模态框触摸事件
      let modalTouchStartX = 0;
      let modalTouchStartY = 0;
      let modalIsPinching = false;

      modalImg.addEventListener("touchstart", (e) => {
        // 触摸开始时禁用过渡效果
        modalImg.classList.add("no-transition");
        
        if (e.touches.length === 2) {
          // 双指缩放
          modalIsPinching = true;
          modalLastDistance = getDistance(e.touches[0], e.touches[1]);
        } else if (e.touches.length === 1) {
          // 单指
          modalIsPinching = false;
          modalTouchStartX = e.touches[0].clientX;
          modalTouchStartY = e.touches[0].clientY;
          
          if (modalScale > 1) {
            modalIsDragging = true;
          }
        }
      });

      modalImg.addEventListener("touchmove", (e) => {
        if (e.touches.length === 2 && modalIsPinching) {
          // 双指缩放
          e.preventDefault();
          const distance = getDistance(e.touches[0], e.touches[1]);
          const ratio = distance / modalLastDistance;
          modalScale = Math.min(Math.max(1, modalScale * ratio), 5);
          modalLastDistance = distance;
          updateModalTransform();
        } else if (modalIsDragging && e.touches.length === 1) {
          // 拖动
          e.preventDefault();
          const deltaX = e.touches[0].clientX - modalTouchStartX;
          const deltaY = e.touches[0].clientY - modalTouchStartY;
          modalTranslateX += deltaX;
          modalTranslateY += deltaY;
          modalTouchStartX = e.touches[0].clientX;
          modalTouchStartY = e.touches[0].clientY;
          updateModalTransform();
        }
      });

      modalImg.addEventListener("touchend", (e) => {
        const currentTime = Date.now();
        const tapGap = currentTime - modalLastTap;

        if (e.touches.length === 0) {
          modalIsDragging = false;
          
          // 触摸结束后移除no-transition类，恢复过渡效果
          modalImg.classList.remove("no-transition");

          // 只有真的缩小到1以下才重置
          if (modalScale < 1) {
            modalScale = 1;
            modalTranslateX = 0;
            modalTranslateY = 0;
            updateModalTransform();
          }

          // 双击检测（只在非缩放操作时）
          if (tapGap < 300 && tapGap > 0 && !modalIsPinching) {
            if (modalScale === 1) {
              modalScale = 2.5;
          } else {
              modalScale = 1;
              modalTranslateX = 0;
              modalTranslateY = 0;
            }
            updateModalTransform();
          }

          modalIsPinching = false;
        }

        // 重置双指距离
        if (e.touches.length < 2) {
          modalLastDistance = 0;
        }

        modalLastTap = currentTime;
      });

      // 鼠标滚轮
      modalImg.addEventListener("wheel", (e) => {
        e.preventDefault();
        const delta = e.deltaY > 0 ? 0.9 : 1.1;
        modalScale = Math.min(Math.max(1, modalScale * delta), 5);
        if (modalScale === 1) {
          modalTranslateX = 0;
          modalTranslateY = 0;
        }
        updateModalTransform();
      });

      // 鼠标拖动
      let mouseStartX = 0;
      let mouseStartY = 0;
      let mouseDragging = false;

      modalImg.addEventListener("mousedown", (e) => {
        if (modalScale > 1) {
          mouseDragging = true;
          mouseStartX = e.clientX - modalTranslateX;
          mouseStartY = e.clientY - modalTranslateY;
          modalImg.style.cursor = "grabbing";
          modalImg.classList.add("no-transition"); // 禁用过渡
        }
      });

      document.addEventListener("mousemove", (e) => {
        if (mouseDragging) {
          modalTranslateX = e.clientX - mouseStartX;
          modalTranslateY = e.clientY - mouseStartY;
          updateModalTransform();
        }
      });

      document.addEventListener("mouseup", () => {
        if (mouseDragging) {
          mouseDragging = false;
          modalImg.style.cursor = modalScale > 1 ? "grab" : "default";
          modalImg.classList.remove("no-transition"); // 恢复过渡
        }
      });

      function updateModalTransform() {
        // 始终应用transform，即使是初始值
        const transform = `translate(${modalTranslateX}px, ${modalTranslateY}px) scale(${modalScale})`;
        modalImg.style.transform = transform;
        modalImg.style.webkitTransform = transform; // Safari兼容
        modalImg.style.cursor = modalScale > 1 ? "grab" : "default";
        
        // 确保图片可见
        modalImg.style.display = "block";
        modalImg.style.visibility = "visible";
        modalImg.style.opacity = "1";
      }
    }

    loadImages();
  </script>
</body>
</html>
